<template>
	<view class="content">
		<!-- 顶部滑动导航 -->
		<u-navbar :is-back="false" :background="{backgroundColor: '#d4237a'}">
			<view class="nav">
				<view class="l">

				</view>
				<view class="topTabs">
					<u-tabs-swiper ref="topTabs" :list="tabs" :is-scroll="false" :current="curTab" @change="changeTab" gutter="20" bg-color="#d4237a" active-color="#fff" inactive-color="#aeaeae" :active-item-style="topTabsActive"></u-tabs-swiper>
				</view>
				<view class="r">

				</view>
			</view>
		</u-navbar>
		<!-- 滑动主体内容、页面内容 -->
		<swiper class="swiperBox" :current="curSwiper" duration="200" @transition="transition" @animationfinish="animationfinish">
			<!-- 推荐页面、首页 -->
			<swiper-item class="swiperItem musicPage">
				<myscroll>
					<view class="container">
						<!-- 轮播大图Banner -->
						<view class="banner">
							<u-swiper @click="selectBanner" bg-color="none" :list="song_swiper" interval="5000" :circular="true" indicator-pos="bottomRight" :effect3d="true"></u-swiper>
						</view>
						<!-- 菜单功能导航 -->
						<view class="block menus">
							<menu-list :list="menus_list"></menu-list>
						</view>
						<!-- 每日推荐歌单 -->
						<view class="block recommend_sheet">
							<view class="title">
								<view class="u-font-40">每日推荐歌单</view>
								<view class="more u-font-24">
									更多 <text class="iconfont icontabAdd icon"></text>
								</view>
							</view>
							<view class="content">
								<view class="sheet_cont">
									<recommend-sheet :recommend_sheet="recommend_sheet"></recommend-sheet>
								</view>
							</view>
						</view>
						<!-- 每日推荐歌曲 -->
						<view class="block recommend_music">
							<view class="title">
								<view class="u-font-40">每日推荐歌曲</view>
								<view class="more u-font-24">
									更多 <text class="iconfont icontabAdd icon"></text>
								</view>
							</view>
							<view class="content">
								<view class="music_cont">
									<recommend-music :recommend_music="recommend_music"></recommend-music>
								</view>
							</view>
						</view>
						<!-- 每日推荐歌手 -->
						<view class="block recommend_singer">
							<view class="title">
								<view class="u-font-40">每日推荐歌手</view>
								<view class="more u-font-24">
									更多 <text class="iconfont icontabAdd icon"></text>
								</view>
							</view>
							<view class="content">
								<view class="singer_cont">
									<recommend-singer :all_singer_list="all_singer_list"></recommend-singer>
								</view>
							</view>
						</view>
						<!-- 部分排行榜 -->
						<view class="block rank">
							<view class="title">
								<view class="u-font-40">排行榜</view>
								<view class="more u-font-24">
									更多 <text class="iconfont icontabAdd icon"></text>
								</view>
							</view>
							<view class="content">
								<view class="rank_cont">
									<part-of-rank :part_of_rank="part_of_rank"></part-of-rank>
								</view>
							</view>
						</view>
					</view>
				</myscroll>
			</swiper-item>
			
			<!-- 电台页面 -->
			<swiper-item class="swiperItem radioPage"></swiper-item>
		</swiper>
		<!-- 底部导航tabbar -->
		<u-tabbar :list="tabbar" :mid-button="true" active-color="#d4237a" inactive-color="#707070"></u-tabbar>
		
		<!-- mini音乐播放器 -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				tabs: [{
						name: '推荐'
					},
					{
						name: '电台'
					}
				],
				curTab: 0,
				curSwiper: 0,
				topTabsActive: {
					fontSize: '40rpx'
				},
				song_swiper: [],
				menus_list: [
					{ name: '推荐', icon: 'icontuijian', url: ''},
					{ name: '排行榜', icon: 'iconpaihangbang', url: ''},
					{ name: '曲库', icon: 'iconyinle', url: ''},
					{ name: '歌手', icon: 'icongeshou', url: ''},
					{ name: '歌单', icon: 'icongedan1', url: ''}
				],
				all_singer_list: [],
				recommend_sheet: [],
				recommend_music: [],
				part_of_rank: []
			}
		},
		computed: {
			...mapState({
				tabbar: state => state.tabbar.list
			}),
		},
		methods: {
			// 获取轮播图
			getLunbo(){
				this.$request('/getLunbo')
				.then(res => {
					// console.log(res)
					this.song_swiper = res.list
				})
				.catch(err => console.log(err))
			},
			// 获取每日推荐歌单
			getRecommendSheet(){
				this.$request('/getRecommendSheet')
				.then(res => {
					// console.log(res)
					this.recommend_sheet = res.list
				})
				.catch(err => console.log(err))
			},
			// 获取每日推荐歌曲
			getRecommendMusic(){
				this.$request('/getRecommendMusic')
				.then(res => {
					// console.log(res)
					this.recommend_music = res.list
				})
				.catch(err => console.log(err))
			},
			// 获取每日推荐歌手
			getRecommendSinger(){
				this.$request('/getRecommendSinger')
				.then(res => {
					// console.log(res)
					this.all_singer_list = res.list
				})
				.catch(err => console.log(err))
			},
			// 获取部分排行榜
			getPartOfRank(){
				this.$request('/getPartOfRank')
				.then(res => {
					// console.log(res)
					this.part_of_rank = res.list
				})
				.catch(err => console.log(err))
			},
			// tab栏切换
			changeTab(index) {
				this.curSwiper = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.topTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.topTabs.setFinishCurrent(current);
				this.curSwiper = current;
				this.curTab = current;
			},
			// 点击banner里轮播swiper中的歌曲封面
			selectBanner(e){
				console.log(e);
				let song = this.song_swiper[e];
				// this.$router.push({
				// 	path: '/pages/musicPlayer/musicPlayer',
				// 	params: {
				// 		id: song.id
				// 	}
				// })
				uni.navigateTo({
					url: '/pages/musicPlayer/musicPlayer',
					success: (res) => {
						res.eventChannel.emit('acceptSongID', {id: song.id});
					},
					fail: (err) => { console.log(err); }
				})
			},
			
		},
		onLoad() {
			// console.log(this.tabbar)
			this.getLunbo()
			this.getRecommendSheet()
			this.getRecommendMusic()
			this.getRecommendSinger()
			this.getPartOfRank()
		},
	}
</script>

<style lang="scss">
	.content {
		// height: calc(100vh - 50px);
		color: $xj-text-normal;
		padding-top: var(--status-bar-height);
		height: 100vh;
		// #ifdef H5
		padding-top: 0;
		// #endif
		overflow: hidden;

		.nav {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.topTabs {
				width: 260rpx;
			}
			.l {
				width: 10rpx;
			}
			.r {
				width: 10rpx;
			}
		}

		.swiperBox {
			height: 100vh;
			.container{
				padding-bottom: 300rpx;
				position: relative;
				.banner{
					padding-top: 20rpx;
					width: 100vw;
				}
				.block{
					margin: 30rpx 30rpx 0 30rpx;
					width: 690rpx;
					.title{
						padding: 20rpx 0;
						width: 100%;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						.more{
							color: $xj-text-noactive;
							.icon{
								margin-left: 6rpx;
								font-size: 30rpx;
								color: $xj-theme;
							}
						}
					}
					.content{
						width: 100%;
						height: auto;
						position: relative;
						overflow: initial;
					}
				}
				.menus{
					margin-top: 40rpx;
				}
				.recommend_singer{
					.singer_cont{
						margin-left: -30rpx;
					}
				}
				.recommend_sheet{
					.sheet_cont{
						margin-left: -30rpx;
					}
				}
				.recommend_music{
					.music_cont{
						margin-left: -30rpx;
					}
				}
				.rank{
					.rank_cont{
						margin-left: -30rpx;
					}
				}
			
			}
		}
	}
</style>
